<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* 重置带有默认样式的元素 */
        body,div,img {margin:0;padding:0}
        html,body {height:100%;background:black;}
        #outer,img {border-radius:3px;font-size:0;}
        /* 外层盒子设置 */
        #outer {border-radius:7px;width:208px;margin:10px auto;padding:8px 8px 10px 10px;background:white;overflow:hidden;zoom:1;}
        /* 图片样式 */
        #outer img {float:left;margin:2px 2px 0 0;}
        #outer img.clear {clear:both;} 
    </style>
    
    <script type="text/javascript">
        window.onload = function() {
          var oSmalImg = document.getElementById("outer").getElementsByTagName("img");
        /* 鼠标滑动事件 */
            
          for (var i=1;i<oSmalImg.length;i++) {
              oSmalImg[i].index = i;
              oSmalImg[i].onmouseover = function() {
                  oSmalImg[0].src = "./image/big_" + this.index + ".jpg";
              };
          }
        };
    </script>
</head>
<body>
<div id="outer">
    <div id="big">
        <img src="./image/big_1.jpg" alt="">
    </div>
    <img src="./image/small_1.jpg" alt="">
    <img src="./image/small_2.jpg" alt="">
    <img src="./image/small_3.jpg" alt="">
    <img class="clear" src="./image/small_4.jpg" alt="">
    <img src="./image/small_5.jpg" alt="">
    <img src="./image/small_6.jpg" alt="">
    <img src="./image/small_7.jpg" alt="">
    <img src="./image/small_8.jpg" alt="">
    <img src="./image/small_9.jpg" alt="">
    <img src="./image/small_10.jpg" alt="">
    <img src="./image/small_11.jpg" alt="">        
</div>
</body>
</html>